<template>
  <div class="mine">
    <header>
      <dl v-if="!usershow">
        <dt class="dtFlase">
          <img src="../../../../assets/img/patient.png" alt="">
        </dt>
        <dd>
          <p class="userName">未登录</p>
          <p @click="gologin">点击登录 > </p>
        </dd>
        <i class="iconfont icon-shezhi" id="icon1"></i>
      </dl> 
      <!-- 成功后展示 -->
      <dl v-if="usershow">
        <dt>
          <van-uploader :after-read="afterRead" v-model="fileList" :max-count="1"/>
        </dt>
        <dd>
          <p class="userName">{{username}}</p>
          <p @click="outLogin">退出登录 > </p>
        </dd>
        <i class="iconfont icon-shezhi" id="icon1"></i>
      </dl> 
    </header>
    <div class="box">
      <ul>
        <li @click="Recharge">
          <p>{{myIccount.balance?myIccount.balance/100:'--'}}</p>
          <p>重置金额</p>
        </li>
        
        <li>
          <p>{{myIccount.source?myIccount.source:'--'}}</p>
          <p>可用积分</p>
        </li>
        
        <li>
          <p>正常</p>
          <p>状态</p>
        </li>
      </ul>
    </div>
    <div class="order">
      <span>我的订单</span>
      <span>全部订单 > </span>
      <ul>
        <li @click="goCart">
          <i class="iconfont icon-gouwuchekong" id="icon1"></i>
          <p>购物车</p>
        </li>
        <li>
          <i class="iconfont icon-fukuan" id="icon1"></i>
          <p>代付款</p>
        </li>
        <li>
          <i class="iconfont icon-che" id="icon1"></i>
          <p>代付货</p>
        </li>
        <li>
          <i class="iconfont icon-pinglun" id="icon1"></i>
          <p>待评论</p>
        </li>
        <li>
          <i class="iconfont icon-shouhou" id="icon1"></i>
          <p>售后</p>
        </li>
      </ul>
    </div>
    <div class="remind">
      <span>用药提醒</span>
      <span>查看全部 > </span>
      <div class="order-son">
        <span>早上</span>
        <span>09:43</span>
        <span>更改设置</span>
      </div>
    </div>
    <div class="context">
      <h3>健康档案</h3>
      <p>- -健康</p>
      <span>女 25岁</span>
  
      <span @click="jump()">查看文档</span>
    </div>
    <div class="footer">
      <h3>工具与服务</h3>
      <ul>
        <li @click="$router.push('/home/mine/changePass')">
          <i class="iconfont icon-bianji"></i>
          <p>修改密码</p>
        </li>
        <li @click="$router.push('/home/mine/address')">
          <i class="iconfont icon-shezhi"></i>
          <p>地址管理</p>
        </li>
        <li @click="$router.push('/home/mine/drups')">
          <i class="iconfont icon-remind"></i>
          <p>用药提醒</p>
        </li>
        <li @click="$router.push('/home/mine/gorecord')">
          <i class="iconfont icon-chongzhi"></i>
          <p>充值记录</p>
        </li>
        <li>
          <i class="iconfont icon-jilu"></i>
          <p>病例</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// import {updateImg,getImageUrl} from '@/api/drugShop'
import { mapState } from 'vuex';
import {getAccount, getRecord, getSelf, updateImg, getImageUrl, updateUser} from '../../../../api/api'
export default {
  data() {
    return {
      username:'',
      usershow:false,
      fileList:[],
      myIccount:{}    //定义一波余额
    }
  },
  computed: {
    ...mapState('patientStore', ['loginStatus'])
  },
  name: "mine",
  created() {
    // console.log(window.sessionStorage.getItem('user'))
    if(window.sessionStorage.getItem('username')){
      console.log(1)
      this.username=window.sessionStorage.getItem('username')
      console.log(this.username)
      this.usershow=true
    }else{
      this.usershow=false
    }
    //初始化 身份信息一波
    this.init()
  },
  methods: {
    async init() {
      const account = await getAccount()
      if (account.code === 200) {
        // console.log(account)
        if (this.loginStatus) {
          this.myIccount = account.data[0]
          console.log(this.myIccount)
        }
      }
      console.log(localStorage.getItem('patient_id'))
      const record = await getRecord(localStorage.getItem('patient_id'))
      if (record.code === 200) {
        this.user = record.data[0]
        this.user.age = new Date().getFullYear() - new Date(this.user.birthday).getFullYear() + 1
        if (record.data[0].realname) {
          this.isExist = true
        }
      }
      const self = await getSelf()
      if (self.code === 200) {
        this.user = Object.assign({}, this.user, self.data[0])
        this.fileList = [{ url: getImageUrl(self.data[0].avatar), isImage: true }]
      }
      // console.log()
    },
    //修改头像
    afterRead(val) {
      updateImg([val.file]).then(async res => {
        console.log(res)
        if (res.code === 200) {
          this.$toast.success('上传成功')
          console.log(updateUser)
          updateUser({ avatar: res.data[0] }).then()
        }
      })
    },
    gologin(){
      this.$router.push('/login')
    },
    logout(){
      window.sessionStorage.clear('user')
      this.usershow=!this.usershow
    },
    Recharge(){
      this.$router.push('/recharge')
    },
    goCart(){
      this.$router.push('/cart')
    },
    outLogin(){
      window.sessionStorage.removeItem('user')
      this.$router.push('/login')
    },
    jump(){
      this.$router.push('/home/mine/Healthrecord')
    }
  }
}

</script>

<style scoped>
.dtFlase{
  width: 80px;
  height: 80px;
}
#app .dtFlase img{
  width: 100%;
  height: 100%;
}
.mine{
  width: 100%;
  height: 100%;
  overflow: auto;
}
.order{
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
  background: white;
  height: 100px;
  border: 1px solid #ccc;
}
.order span:nth-of-type(1){
  float: left;
  margin-left: 20px;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 800;
}
.order span:nth-of-type(2){
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}
.remind{
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
  background: white;
  height: 80px;
  border: 1px solid #ccc;
}
.remind span:nth-of-type(1){
  float: left;
  margin-left: 20px;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 800;
}
.remind span:nth-of-type(2){
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}
.order-son{
  width: 80%;
  margin: 0 auto;
  margin-top: 30px;
  background: rgba(236, 222, 222, 0.87);
  height: 40px;
  border-radius: 10%;
}
.order-son>span:nth-of-type(1){
  float: left;
  margin-left: 5px;
}
.order-son>span:nth-of-type(2){
  float: left;
  margin-left: 15px;
  color: #87C9FE;
  font-size: 30px;
  font-weight: 800;
  line-height: 20px;
}
.order-son>span:nth-of-type(3){
  float: right;
  margin-right: 10px;
  background: #87C9FE;
  color: white;
  width: 60px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  border-radius: 35%;
  margin-top: 5px;
}
.order ul{
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 3px;
}
.order ul>li{
  text-align: center;
}
.order ul>li i{
  float: left;
  color: #87C9FE;
}
.tussss{
  position: fixed;
  right: 35px;
  top: 325px;
}

.mine{
  width: 100%;
  height: 100%;
  background:whitesmoke;
}
header{
  width: 100%;
  height: 110px;
}
.img1{
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin-left: 10px;
  margin-top:20px;
}
.mine dl{
  height: 100px;
  width: 100%;
  display: flex;
  align-items: center;
  padding-left:10px;
  justify-content: space-between;
}
dl dt,dl dd{
  float: left;
  margin-top:10px;
}
.mine dl dt{
  text-align: center;
  margin:0 10px;
  margin-top:40px;
}
#app .mine dl dt img{
  border-radius: 50%;
}
#app .van-image__error,#app .van-image__img,#app .van-image__loading{
  border-radius: 50%;
}
dl dd{
  margin-left: 10px;
  flex:3;
}
dl dd p{
  margin-top: 20px;
}
#icon1{
  float: right;
  font-size: 30px;
  flex:1;
}
.userName{
  font-weight: 800;
  font-size: 20px;
}
.box{
  width: 90%;
  height: 100px;
  background: #87C9FE;
  margin: 0px auto;
  margin-top: 30px;
  border: 1px solid #ccc;
}
.box ul>li{
  float: left;
  width: 110px;
  height: 40px;
  text-align: center;
  margin-top: 30px;
  font-size: 18px;
  line-height: 25px;
  border-right: 1px solid white;
  color: white;
}
.box ul>li:nth-last-child(1){
  border:0
}
.box ul>li p:nth-last-child(2){
  color: white;
  font-size: 25px;
}
.box ul>li p:nth-last-child(1){
  color:#ECECEC;
  font-size: 18px;
}
.context{
  width: 90%;
  height: 100px;
  border: 1px solid #ccc;
  margin: 0 auto;
  margin-top: 20px;
  background: white;
}
.context h3{
  width: 80%;
  height: 30px;
  margin: 0 auto;
  border-bottom: 1px solid;
  line-height: 30px;
}
.context p{
  margin-left: 40px;
  margin-top: 10px;
  color:green;
}
.context span:nth-of-type(1){
  float: left;
  margin-left: 40px;
  margin-top: 20px;
}
.context span:nth-of-type(2){
  float: right;
  margin-right: 40px;
  background: #87C9FE;
  width: 100px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: white;
  border-radius: 35%;
}
.footer{
  width: 90%;
  height: 165px;
  background: white;
  border: 1px solid #ccc;
  margin: 0 auto;
  margin-top: 20px;
}
.footer h3{
  width: 80%;
  height: 30px;
  margin: 0 auto;
  border-bottom: 1px solid;
  line-height: 30px;
  margin-bottom: 10px;
}
.footer ul>li{
  width: 70px;
  height: 50px;
  float: left;
  text-align: center;
  line-height: 20px;
  margin-left: 10px;
}
.footer ul>li i{
  font-size: 30px;
}
</style>